{% extends "front/base.html" %}

{% block content %}
<!-- 轮播图部分 -->
<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="hero-section">
                <div class="container text-center">
                    <h1>{{ '歡迎來到日創科技' | t }}</h1>
                    <p class="lead">{{ '專業的技術服務提供商' | t }}</p>
                    <a href="{{ url_for('front.contact') }}" class="btn btn-primary btn-lg">
                        {{ '聯繫我們' | t }}
                    </a>
                </div>
            </div>
        </div>
        <!-- 可以添加更多轮播图... -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>


<!-- 我们提供的服务 -->
<section class="section-padding bg-light">
    <div class="container">
        <h2 class="text-center mb-5">{{ '我們提供的服務' | t }}</h2>
        <div class="row g-4">
            <div class="col-md-6 col-lg-4">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-laptop-code"></i>
                    </div>
                    <h4>{{ '網頁開發' | t }}</h4>
                    <p>{{ '企業網站專屬的高端定制化服務解決方案，全面提升企業品牌的有效傳播。' | t }}</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h4>{{ '手機應用程式開發' | t }}</h4>
                    <p>{{ '專注手機APP定制設計開發，創造有活力的品牌應用，提升用戶體驗和品牌價值感。' | t }}</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <h4>{{ '系統開發' | t }}</h4>
                    <p>{{ '憑藉多年行內經驗與專業化團隊，滿足預期目標走向卓越。' | t }}</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-file-invoice-dollar"></i>
                    </div>
                    <h4>{{ '申請政府資助' | t }}</h4>
                    <p>{{ '幫助中小企透過科技方案轉型。' | t }}</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h4>{{ '人工智能研發' | t }}</h4>
                    <p>{{ '為各行業量身定制人工智能解決方案，推動客戶的實際業務發展。' | t }}</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <h4>{{ '創業顧問' | t }}</h4>
                    <p>{{ '為您提供最新最全的創業相關咨詢服務。' | t }}</p>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- 我们做什么 -->
<section class="section-padding">
    <div class="container">
        <h2 class="text-center mb-5">{{ '我們做什麼' | t }}</h2>
        <p class="lead text-center mb-5">{{ '爲了讓客戶擁有良好的體驗感，我們公司會習慣性考慮到這五個關鍵性問題：' | t }}</p>
        <div class="row justify-content-center">
            <!-- 客户需求 -->
            <div class="col-md-4 mb-4">
                <div class="feature-card theme-primary">
                    <div class="card-icon">
                        <i class="fas fa-bullseye"></i>
                        <span class="number">01</span>
                    </div>
                    <h5>{{ '客戶需求' | t }}</h5>
                    <p>{{ '是否解決了客戶的真正需求。' | t }}</p>
                </div>
            </div>
            
            <!-- 解决方案 -->
            <div class="col-md-4 mb-4">
                <div class="feature-card theme-success">
                    <div class="card-icon">
                        <i class="fas fa-puzzle-piece"></i>
                        <span class="number">02</span>
                    </div>
                    <h5>{{ '解決方案' | t }}</h5>
                    <p>{{ '是否全面的考慮到客戶所會出現的問題，並且給出最優勢的解決方案。' | t }}</p>
                </div>
            </div>
            
            <!-- 用户体验 -->
            <div class="col-md-4 mb-4">
                <div class="feature-card theme-info">
                    <div class="card-icon">
                        <i class="fas fa-route"></i>
                        <span class="number">03</span>
                    </div>
                    <h5>{{ '用戶體驗' | t }}</h5>
                    <p>{{ '操作流程是否順暢，符合客戶的習慣和心裏預期。' | t }}</p>
                </div>
            </div>
            
            <!-- 视觉设计 -->
            <div class="col-md-4 mb-4">
                <div class="feature-card theme-warning">
                    <div class="card-icon">
                        <i class="fas fa-paint-brush"></i>
                        <span class="number">04</span>
                    </div>
                    <h5>{{ '視覺設計' | t }}</h5>
                    <p>{{ '視覺設計效果是否符合客戶的習慣興趣。' | t }}</p>
                </div>
            </div>
            
            <!-- 安全保障 -->
            <div class="col-md-4 mb-4">
                <div class="feature-card theme-danger">
                    <div class="card-icon">
                        <i class="fas fa-shield-alt"></i>
                        <span class="number">05</span>
                    </div>
                    <h5>{{ '安全保障' | t }}</h5>
                    <p>{{ '關於金錢，隱私用戶個人信息方面的内容有沒有給與足夠的關懷。' | t }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 服务特点 -->
<section class="section-padding">
    <div class="container">
        <h2 class="text-center mb-5">{{ '我們的優勢' | t }}</h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="service-point-card">
                    <span class="point-number">01</span>
                    <h5>{{ '專業團隊' | t }}</h5>
                    <p>{{ '擁有經驗豐富的技術團隊，提供專業的解決方案' | t }}</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="service-point-card">
                    <span class="point-number">02</span>
                    <h5>{{ '優質服務' | t }}</h5>
                    <p>{{ '24小時響應，為客戶提供高效優質的服務' | t }}</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="service-point-card">
                    <span class="point-number">03</span>
                    <h5>{{ '創新科技' | t }}</h5>
                    <p>{{ '持續創新，引入先進技術，助力企業發展' | t }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 关于我们 -->
<section class="section-padding bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h2>{{ '關於日創科技' | t }}</h2>
                <p>{{ '日創科技是一家專注於提供專業技術服務的公司。我們致力於為客戶提供最優質的解決方案，幫助企業實現數字化轉型。' | t }}</p>
                <a href="{{ url_for('front.about') }}" class="btn btn-primary">
                    {{ '了解更多' | t }}
                </a>
            </div>
            <div class="col-md-6">
                <img src="{{ url_for('static', filename='images/about-us.jpg') }}" 
                     alt="{{ '關於我們' | t }}" 
                     class="img-fluid rounded shadow">
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script>
    new Swiper('.swiper', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 5000,
        },
    });
</script>
{% endblock %} 